<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:object="${book}">
<head>
    <meta charset="UTF-8">  <!-- 设置字符编码为UTF-8，确保中文正常显示 -->
    <title>借阅图书</title>  <!-- 页面标题，显示在浏览器标签页 -->

    <!-- 样式定义（CSS） -->
    <style>
        /* 基础样式：首次定义body样式（后续被覆盖，可能为冗余代码） */
        body {
            font-family: "Helvetica Neue", sans-serif;  /* 字体：无衬线字体，清晰易读 */
            margin: 30px;  /* 页面外边距30px */
            background-color: #f9f9f9;  /* 浅灰色背景，降低视觉疲劳 */
        }

        h1 {
            text-align: center;  /* 标题居中 */
            color: #333;  /* 深灰色文字，避免纯黑刺眼 */
        }

        form {
            max-width: 500px;  /* 表单最大宽度500px，避免过宽 */
            margin: 0 auto;  /* 水平居中 */
            background: white;  /* 白色背景，与页面背景区分 */
            padding: 20px;  /* 内边距20px */
            border-radius: 6px;  /* 圆角边框，柔和视觉 */
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* 轻微阴影，增强层次感 */
        }

        .info {  /* 图书信息行样式 */
            margin: 10px 0;  /* 上下外边距10px */
            font-size: 16px;  /* 字体大小16px */
        }

        .info strong {  /* 信息标签加粗部分 */
            color: #333;  /* 深灰色，突出标签 */
        }

        label {  /* 表单标签样式 */
            display: block;  /* 块级元素，独占一行 */
            margin: 12px 0 6px;  /* 上外边距12px，下6px */
            font-weight: 600;  /* 半粗体，突出标签 */
        }

        input[type="datetime-local"] {  /* 日期时间输入框样式 */
            width: 100%;  /* 宽度占满父容器 */
            padding: 8px 10px;  /* 内边距 */
            border: 1px solid #ccc;  /* 浅灰色边框 */
            border-radius: 4px;  /* 圆角 */
            box-sizing: border-box;  /* 盒模型：width包含边框和内边距 */
        }

        button {  /* 提交按钮样式 */
            margin-top: 20px;  /* 上外边距20px */
            width: 100%;  /* 宽度占满 */
            padding: 10px;  /* 内边距 */
            background-color: #2c3e50;  /* 深蓝色背景 */
            border: none;  /* 无边框 */
            color: white;  /* 白色文字 */
            font-size: 16px;  /* 字体大小 */
            border-radius: 4px;  /* 圆角 */
            cursor: pointer;  /* 鼠标悬停时显示手型 */
        }

        button:hover {  /* 按钮悬停效果 */
            background-color: #1a2733;  /* 颜色加深，反馈交互 */
        }

        /* 二次定义body样式（覆盖前面的定义）：使用flex布局确保页脚在底部 */
        body {
            font-family: "Helvetica Neue", sans-serif;
            margin: 0;  /* 清除默认外边距 */
            background-color: #f9f9f9;
            display: flex;  /* 启用flex布局 */
            flex-direction: column;  /* 垂直方向排列子元素 */
            min-height: 100vh;  /* 最小高度为视口高度，确保占满屏幕 */
        }

        .navbar {  /* 导航栏样式 */
            background-color: #2c3e50;  /* 深蓝色背景 */
            padding: 15px 30px;  /* 内边距：上下15px，左右30px */
            display: flex;  /* 水平排列子元素 */
            justify-content: space-between;  /* 两端对齐（品牌、菜单、用户区） */
            align-items: center;  /* 垂直居中 */
            color: white;  /* 文字白色 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);  /* 底部阴影，区分导航栏与内容 */
        }

        .navbar-brand {  /* 品牌名称样式 */
            font-size: 24px;  /* 较大字体 */
            font-weight: bold;  /* 粗体 */
            text-decoration: none;  /* 无下划线 */
            color: white;  /* 白色文字 */
        }

        .navbar-menu {  /* 导航菜单样式 */
            display: flex;  /* 水平排列菜单项 */
            gap: 20px;  /* 菜单项间距20px */
        }

        .navbar-menu a {  /* 菜单项链接样式 */
            color: white;  /* 白色文字 */
            text-decoration: none;  /* 无下划线 */
            font-size: 16px;  /* 字体大小 */
            padding: 8px 12px;  /* 内边距，增大点击区域 */
            border-radius: 4px;  /* 圆角 */
            transition: background-color 0.3s ease;  /* 背景色过渡动画 */
        }

        .navbar-menu a:hover {  /* 菜单项悬停效果 */
            background-color: #34495e;  /* 背景色加深，反馈交互 */
        }

        .navbar-auth {  /* 用户认证区域样式 */
            display: flex;  /* 水平排列元素 */
            align-items: center;  /* 垂直居中 */
            gap: 15px;  /* 元素间距15px */
        }

        .navbar-auth span {  /* 用户名显示样式 */
            font-size: 16px;  /* 字体大小 */
        }

        .auth-btn {  /* 登录/退出按钮样式 */
            padding: 8px 16px;  /* 内边距 */
            font-size: 14px;  /* 字体大小 */
            cursor: pointer;  /* 手型光标 */
            border: none;  /* 无边框 */
            border-radius: 4px;  /* 圆角 */
            background-color: #2196F3;  /* 亮蓝色背景 */
            color: white;  /* 白色文字 */
            transition: background-color 0.3s ease;  /* 过渡动画 */
            text-decoration: none;  /* 无下划线（作为链接时） */
        }

        .auth-btn:hover {  /* 按钮悬停效果 */
            background-color: #1976D2;  /* 颜色加深 */
        }

        .content {  /* 主内容区样式 */
            flex: 1;  /* 占据剩余空间，将页脚推到最底部 */
            padding: 30px;  /* 内边距 */
        }

        h1 {  /* 主标题样式（补充） */
            text-align: center;
            color: #333;
            margin-bottom: 20px;  /* 下外边距20px */
        }

        .footer {  /* 页脚样式 */
            background-color: #2c3e50;  /* 与导航栏一致的深蓝色 */
            color: white;  /* 白色文字 */
            text-align: center;  /* 文字居中 */
            padding: 15px;  /* 内边距 */
            font-size: 14px;  /* 较小字体 */
        }

        .footer a {  /* 页脚链接样式 */
            color: #2196F3;  /* 亮蓝色，与按钮呼应 */
            text-decoration: none;  /* 无下划线 */
        }

        .footer a:hover {  /* 链接悬停效果 */
            text-decoration: underline;  /* 下划线，提示可点击 */
        }
    </style>

    <!-- JavaScript脚本：处理页面交互逻辑 -->
    <script>
        // 页面DOM加载完成后执行
        document.addEventListener('DOMContentLoaded', function () {
            // 从localStorage获取用户ID（登录时存储）
            const userId = localStorage.getItem('userId');
            if (userId) {
                // 找到“我的借阅”链接，设置其href为包含用户ID的路径（用于查询该用户的借阅记录）
                const link = document.getElementById('myBorrowingsLink');
                link.href = '/borrowing/student/borrowings?userId=' + encodeURIComponent(userId);
            }
        });

        // 退出登录函数
        function logout() {
            // 清除localStorage中存储的登录信息（令牌、用户类型、ID、用户名）
            localStorage.removeItem('token');
            localStorage.removeItem('userType');
            localStorage.removeItem('userId');
            localStorage.removeItem('username');
            // 重定向到登录页
            window.location.href = '/user/login';
        }

        // 页面加载完成后执行（检查登录状态）
        window.onload = function () {
            // 从localStorage获取令牌（登录凭证）
            const token = localStorage.getItem('token');
            if (!token) {
                // 无令牌 → 未登录，重定向到登录页
                window.location.href = '/user/login';
            }
            // 获取用户名
            const username = localStorage.getItem('username');
            // 获取用户认证区域元素
            const authSection = document.getElementById('authSection');
            if (token && username) {
                // 已登录：显示用户名和退出按钮
                authSection.innerHTML = `
                    <span>欢迎，用户：${username}</span>
                    <a href="/user/login" class="auth-btn" onclick="logout()">退出</a>
                `;
            } else {
                // 令牌无效或无用户名：显示登录按钮并强制跳转登录页
                authSection.innerHTML = `
                    <a href="/user/login" class="auth-btn">登录</a>
                `;
                window.location.href = '/user/login';
            }
        };

        // 表单提交函数（处理借阅请求）
        function submitForm() {
            // 构建表单数据：图书ID（从后端book对象获取）和应还时间（用户输入）
            const formData = {
                bookId: [[${book.id}]],  // Thymeleaf内联表达式：获取当前图书的ID
                dueTime: document.getElementById('dueTime').value  // 从输入框获取用户选择的应还时间
            };

            // 发送POST请求到后端借阅接口
            fetch('/borrowing/student/create?userId='+localStorage.getItem('userId'), {
                method: 'POST',  // 请求方法：POST
                headers: {
                    'Content-Type': 'application/json',  // 请求体格式：JSON
                    'Authorization': `Bearer ${localStorage.getItem('token')}`  // 携带令牌（身份验证）
                },
                body: JSON.stringify(formData)  // 将表单数据转为JSON字符串
            })
                .then(res => res.json())  // 解析响应为JSON
                .then(data => {
                    if (data.code === 0) {  // 后端返回code=0 → 成功
                        alert("借阅请求提交成功");
                        // 跳转至“我的借阅”页面
                        window.location.href = '/borrowing/student/borrowings?userId=' + localStorage.getItem('userId');
                    } else {  // code≠0 → 失败
                        alert("借阅失败：" + data.message);  // 显示后端返回的错误信息
                    }
                })
                .catch(err => {  // 网络错误等异常
                    alert("请求失败：" + err.message);
                });
            return false;  // 阻止表单默认提交行为（避免页面刷新）
        }
    </script>
</head>
<body>
<!-- 导航栏 -->
<header class="navbar">
    <a href="/" class="navbar-brand">应急图书管理系统</a>  <!-- 品牌链接，点击返回首页 -->
    <div class="navbar-menu">  <!-- 导航菜单 -->
        <a href="/">首页</a>  <!-- 首页链接 -->
        <a href="/book/student/books">图书列表</a>  <!-- 图书列表链接 -->
        <a id="myBorrowingsLink" href="#">我的借阅</a>  <!-- 我的借阅链接（JS动态设置href） -->
    </div>
    <div class="navbar-auth" id="authSection">  <!-- 用户认证区域（JS动态填充内容） -->
        <!-- 初始内容：Thymeleaf表达式显示用户名（未登录时会被JS覆盖） -->
        <span>欢迎，用户：<span th:text="${username}"></span></span>
        <a th:href="@{/user/login}" class="auth-btn" onclick="logout()">退出</a>
    </div>
</header>

<!-- 主内容区 -->
<main class="content">
    <h1>借阅图书</h1>  <!-- 页面标题 -->
    <form th:object="${book}" onsubmit="return submitForm()">  <!-- 借阅表单 -->
        <!-- th:object="${book}"：与根元素一致，表单内可通过*{属性}访问图书属性 -->
        <!-- onsubmit="return submitForm()"：提交时执行自定义函数，返回false阻止默认提交 -->

        <!-- 图书信息展示（从后端book对象获取） -->
        <div class="info"><strong>书名:</strong> <span th:text="*{title}"></span></div>  <!-- *{title}等价于book.title -->
        <div class="info"><strong>作者:</strong> <span th:text="*{author}"></span></div>  <!-- 作者信息 -->
        <div class="info"><strong>出版社:</strong> <span th:text="*{publisher} ?: '无'"></span></div>  <!-- 出版社，为空时显示“无” -->
        <div class="info"><strong>ISBN:</strong> <span th:text="*{isbn}"></span></div>  <!-- ISBN编号 -->

        <!-- 应还时间输入 -->
        <label for="dueTime">应还时间</label>  <!-- 输入框标签 -->
        <input type="datetime-local" id="dueTime" name="dueTime" required>  <!-- 日期时间选择器，必填项 -->

        <button type="submit">提交借阅</button>  <!-- 提交按钮，触发表单提交 -->
    </form>
</main>

<!-- 页脚 -->
<footer class="footer">
    <p>© 2025 应急图书管理系统 | 联系我们: <a href="mailto:support@bookmanagement.com">support@bookmanagement.com</a></p>
    <!-- 版权信息和联系邮箱（mailto:链接直接打开邮件客户端） -->
</footer>
</body>
</html>